<template>
	<view class="real-name">
		<view class="step">
			第一步：身份证照片上传
		</view>
		<view class="white-box public345">
			<view class="card-ID-box">
				<image :src="imageUrl('realname-headshot.png')" mode="widthFix" class="image" />
			</view>
			<view class="card-ID-box">
				<image :src="imageUrl('realname-national.png')" mode="widthFix" class="image" />
			</view>
		</view>

		<!-- form表单 -->
		<form @submit="submitFrom">
			<view class="step">
				第二步：信息自动填充（请检查身份信息是否正确）
			</view>
			<view class="white-box public345">
				<view class="ipt-box">
					<text class="ipt-box-left">姓名</text>
					<input class="ipt" type="text" placeholder="请输入真实姓名" placeholder-class="placeholder-style"
						name="name" v-model="name">
				</view>
				<view class="ipt-box">
					<text class="ipt-box-left">身份证号</text>
					<input class="ipt" type="text" placeholder="请输入身份证号" placeholder-class="placeholder-style"
						name="ID_card" v-model="ID_card">
				</view>
			</view>
			<view class="step">
				第三步：手机号码验证
			</view>
			<view class="white-box public345">
				<view class="ipt-box">
					<text class="ipt-box-left">手机号码</text>
					<input class="ipt" maxlength="11" placeholder="请输入手机号码" placeholder-class="placeholder-style"
						name="phone"></input>
				</view>
				<view class="ipt-box">
					<text class="ipt-box-left">验证码</text>
					<input class="ipt" maxlength="6" placeholder="请输入验证码" placeholder-class="placeholder-style"
						name="number"></input>
					<view class="get-num">
						<text class="get-num-time" v-if="timeMin <= 60 && timeMin > 0">{{timeMin}}s</text>
						<text v-else @click="getNum">获取验证码</text>
					</view>
				</view>
			</view>
			<!-- 立即认证 -->
			<view class="now-realname">
				<button class="btn" form-type="submit">立即认证</button>
			</view>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 获取身份证照片信息
				name: '',
				ID_card: '',
				// 验证码 定时器
				timeMin: 61,
				timer: null
			}
		},
		methods: {
			getNum() {
				// 每次点击之前 不存在定时器 则开启定时器
				if (!this.timer) {
					this.openSetInterval()
				}
			},
			// 打开定时器
			openSetInterval() {
				this.timeMin = 60
				this.timer = setInterval(() => {
					this.timeMin--
					// 倒计时为0时 清除定时器
					if (this.timeMin === 0) {
						this.closeSetInterval()
					}
				}, 1000)
			},
			// 关闭定时器
			closeSetInterval() {
				clearInterval(this.timer)
				this.timer = null
				this.timeMin = 61
			},
			submitFrom(e) {
				console.log(e.target.value)
			}
		},
		onUnload() {
			// 离开页面 清除定时器
			if (this.timer) {
				this.closeSetInterval()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.real-name {
		width: 100vw;
		font-size: 28rpx;
		color: #999;

		.step {
			padding: 32rpx 0 0 30rpx;
			line-height: 44rpx;
		}

		.white-box {
			background: #fff;

			.ipt-box {
				display: flex;
				padding: 26rpx 0;
				font-size: 26rpx;
				color: #333;

				.ipt-box-left {
					display: inline-block;
					width: 140rpx;
				}

				/deep/ .placeholder-style {
					font-size: 26rpx;
					color: #D0D0D0;
				}

				.ipt {
					width: 320rpx;
					font-size: 26rpx;
				}

				.get-num {
					width: 220rpx;
					color: #FF7803;
					text-align: right;

					.get-num-time {
						margin-left: 20rpx;
					}
				}
			}
		}

		.card-ID-box {
			display: inline-block;
			width: 330rpx;
			height: 208rpx;
			margin: 48rpx 0;
			border-radius: 16rpx;
			background: rgba(255, 120, 3, .1);

			&:first-child {
				margin-right: 30rpx;
			}

			.image {
				width: 302rpx;
				height: 180rpx;
				margin: 14rpx;
			}
		}

		.now-realname {
			position: fixed;
			bottom: 0;
			padding: 16rpx 30rpx;
			background-color: #fff;
			text-align: center;

			// 小程序 底部
			// 兼容 IOS 11.2 以下
			// padding-bottom: constant(safe-area-inset-bottom);
			// 兼容 IOS 11.2 以上
			// padding-bottom: env(safe-area-inset-bottom);

			// 预设一个高度
			padding-bottom: calc(18rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(18rpx + env(safe-area-inset-bottom));

			.btn {
				display: block;
				width: 690rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
				border: 0;
				background: #FF7803;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}
</style>
